<template>
    <div class="out-style">
        <Modal class="global-modal-line" v-model="isShow" title="查看详情" :closable="false" :mask-closable="false">
            <div class="details">
                <Row>
                    <Col span="4" offset="2">文章名字：</Col>
                    <Col span="10">{{data.article_name}}</Col>
                </Row>
                <Row>
                    <Col span="4" offset="2">文章作者：</Col>
                    <Col span="10">{{data.article_author}}</Col>
                </Row>
                <Row>
                    <Col span="4" offset="2">分类名称：</Col>
                    <Col span="10">{{data.category_name}}</Col>
                </Row>
                <Row>
                    <Col span="4" offset="2">发布时间：</Col>
                    <Col span="10">{{data.create_time}}</Col>
                </Row>
            </div>
            <div slot="footer">
                <Button type="text" @click="cancelAction()">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
  name: 'ArticleDetails',
  props: {
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    cancelAction () {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.details{
    line-height: 50px;
}
</style>
